<template>
    <component :is="props.tag" :style="styleProps" class="l-text-component" @click="handleClick">
      {{ props.text }}
    </component>
  </template>
  
  <script lang="ts" setup>
  import { defineOptions, computed, defineProps } from 'vue';
  import useComponentCommon from '../hooks/useComponentCommon'
  import { transformToComponentProps, textDefaultProps,textStylePropNames } from '../defaultProps';
  /**
   * LText组件默认属性
   */
  const defaultProps = transformToComponentProps(textDefaultProps);
  // console.log(defaultProps, 'defaultProps');
  defineOptions({
    name: 'l-text'
  });
  const  abc = {
    tag: {
      type: String,
      default: 'div'
    },
    ...defaultProps
  }
  const props: any = defineProps({
    tag: {
      type: String,
      default: 'div'
    },
  
    text: {
      type: String,
      default: '正文内容'
    },
    fontSize: {
      type: String,
      default: '14px'
    },
    fontFamily: {
      type: String,
      default: ''
    },
    fontWeight: {
      type: String,
      default: 'normal'
    },
    fontStyle: {
      type: String,
      default: 'normal'
    },
    textDecoration: {
      type: String,
      default: 'none'
    },
    lineHeight: {
      type: String,
      default: '1'
    },
    textAlign: {
      type: String,
      default: 'left'
    },
    color: {
      type: String,
      default: '#000000'
    },
    backgroundColor: {
      type: String,
      default: ''
    },
    actionType: {
      type: String,
      default: ''
    },
    url: {
      type: String,
      default: ''
    },
    height: {
      type: String,
      default: ''
    },
    width: {
      type: String,
      default: '373px'
    },
    paddingLeft: {
      type: String,
      default: '0px'
    },
    paddingRight: {
      type: String,
      default: '0px'
    },
    paddingTop: {
      type: String,
      default: '0px'
    },
    paddingBottom: {
      type: String,
      default: '0px'
    },
    borderStyle: {
      type: String,
      default: 'none'
    },
    borderColor: {
      type: String,
      default: '#000'
    },
    borderWidth: {
      type: String,
      default: '0'
    },
    borderRadius: {
      type: String,
      default: '0'
    },
    boxShadow: {
      type: String,
      default: '0 0 0 #000000'
    },
    opacity: {
      type: String,
      default: '1'
    },
    position: {
      type: String,
      default: 'absolute'
    },
    left: {
      type: String,
      default: '0'
    },
    top: {
      type: String,
      default: '0'
    },
    right: {
      type: String,
      default: '0'
    }
  
    // ...defaultProps
  });
  console.log(props, 'props');
  // const styleProps = computed(() => {
  //   return pick(props, ['fontSize', 'color']);
  // });
  // 重用并且简化
      // 抽离并且获得 styleProps
      const { styleProps, handleClick} = useComponentCommon(props, textStylePropNames)
  </script>
  
  <style scoped>
  h2.l-text-component,
  p.l-text-component {
    margin-bottom: 0;
  }
  
  button.l-text-component {
    padding: 5px 10px;
    cursor: pointer;
  }
  
  .l-text-component {
    position: relative !important;
    box-sizing: border-box;
    white-space: pre-wrap;
  }
  </style>
  